<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui的栅格系统</title>
    <!--引入layui的核心css文件-->
    <link rel="stylesheet" type="text/css" href="layui/css/layui.css">
    <!--layui的核心js文件（采用模块化引入）-->
    <script src="layui/layui.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!--布局容器
    1、固定宽度，两侧有留白
    2、完整宽度（屏幕占比100%）
  -->
<div class="layui-container" >
  <div class="layui-row">
    <div class="layui-col-md5" style="background-color: rgb(204, 138, 39)">
      内容5/12
    </div>
    <div class="layui-col-md7" style="background-color: rgb(102, 202, 72)">
      内容7/12
    </div>
  </div>

  <div class="layui-row">
    <div class="layui-col-md4" style="background-color: rgb(207, 24, 95)">
      内容4/12
    </div>
    <div class="layui-col-md4" style="background-color: rgb(83, 28, 211)"> 
      内容4/12
    </div>

    <div class="layui-col-md6" style="background-color: rgb(123, 168, 16)"> 
      内容6/12
    </div>
  </div>

</div>



</div> 
</body>

</html>